<template>
  <div class="page-box">
    <div class="title-card-box"><TitleCard :iconClassName="'el-icon-s-shop'"  :title="'商户管理'"></TitleCard></div>
    <div class="panbox">
      <div class="panbox-item pit1-bg">
        <div class="panbox-item-ex">
          <div class="pi-img-box pit1-bg p-5">
            <img
              src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0829/dd9db202508291015362983.png" />
          </div>
          <div class="panbox-item-title-box">
            <div class="pit-1">商家总数</div>
            <div class="pit-2">3,555</div>
            <div class="pit-3">↑较上月12.5</div>
          </div>
        </div>
      </div>

      <div class="full-fix"></div>

      <div class="panbox-item pit2-bg">
        <div class="panbox-item-ex">
          <div class="pi-img-box pit2-bg p-10">
            <img
              src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0829/87283202508291016225686.png" />
          </div>
          <div class="panbox-item-title-box">
            <div class="pit-1">总销售金额</div>
            <div class="pit-2">¥3,555</div>
            <div class="pit-3">↑较上月12.5</div>
          </div>
        </div>
      </div>
      <div class="full-fix"></div>

      <div class="panbox-item pit3-bg">
        <div class="panbox-item-ex">
          <div class="pi-img-box pit3-bg p-10">
            <img
              src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0829/9ecd1202508291016594816.png" />
          </div>
          <div class="panbox-item-title-box">
            <div class="pit-1">总让利金额</div>
            <div class="pit-2">¥1133,55</div>
            <div class="pit-3">↓较上月12.5</div>
          </div>
        </div>
      </div>
      <div class="full-fix"></div>

      <div class="panbox-item pit4-bg">
        <div class="panbox-item-ex">
          <div class="pi-img-box pit4-bg p-10">
            <img
              src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0829/fca9e202508291017196164.png" />
          </div>
          <div class="panbox-item-title-box">
            <div class="pit-1">总消费笔数</div>
            <div class="pit-2">13,55</div>
            <div class="pit-3">↓较上月12.5</div>
          </div>
        </div>
      </div>
    </div>

    <div class="table-box"></div>

    <CustomizeTable :columns="columns" :fetch-data="fetchTableData" permission-prefix="sys:user" :show-selection="true"
      :show-index="false" :export-file-name="'用户'" :init-search-form="{}" @edit="handleEdit" @delete="handleDelete" :showOperation="false"
      @reset="reset" @status-change="handleStatusChange" ref="table">
      <!-- 搜索区域扩展 -->
      <template #searchExtend>
        <el-form-item label="状态">
          <el-select v-model="searchForm.is_consular_alliance" placeholder="活跃状态" clearable>
            <el-option v-for="item in statusOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <RangeInputCard v-model="searchForm.integralRange1" title="让利金额" icon="el-icon-ex-jifen" inputWidth="80px" />
        <RangeInputCard v-model="searchForm.integralRange2" title="销售金额" icon="el-icon-ex-jiage" inputWidth="80px" />
        <RangeInputCard v-model="searchForm.integralRange3" title="销售笔数" icon="el-icon-edit" inputWidth="80px" />
      </template>

      <template v-slot:baseInfo="{ row }">
        <UserInfoCell :avatar="hangToString(row.brand_logo)" :title="row.merchant_name" :subtitle1="row.contacts_tel"
          :subtitle2="row.id" :maskConfig="{start:3,end:4,enabled:false}" />
      </template>

      <template v-slot:goodsCls="{ row }">
        <LableList :goodsClsList="row.category" :linkUrl="'/product/index?sid='+row.id" />
      </template>

      <template v-slot:CmmunityName="{ row }">
        <ObjectCell :obj="row.community" :keyName="'community_name'" />
      </template>




    </CustomizeTable>

    <!-- 审核弹窗 -->
    <el-dialog title="用户信息" :visible.sync="dialogVisible" width="40%">
      <ReviewDetail v-if="currentRow" :formData="currentRow" @approve="handleApprove" />
    </el-dialog>

  </div>
</template>

<script>
  import {


  } from '@/constants/statusMap';

  import {
    toString
  } from "@/utils/tools.js";
  import CustomizeTable from "@/components/CustomizeTable.vue";
  import UserInfoCell from "@/components/UserInfoCell.vue";
  import RangeInputCard from "@/components/RangeInputCard.vue";
  import LableList from "./components/LableList.vue";
  import ReviewDetail from "./ReviewDetail.vue";
  import ObjectCell from "@/components/ObjectCell.vue";



  export default {
    components: {
      CustomizeTable,
      RangeInputCard,
      ReviewDetail,
      UserInfoCell,
      LableList,
      ObjectCell

    },
    data() {
      return {

        dialogVisible: false,
        currentRow: null,
        columns: [{
            prop: "baseInfo",
            label: "基本信息",
            slot: "baseInfo",
            width: "200px"
          },

          {
            prop: "goodsCls",
            label: "售卖商品",
            slot: "goodsCls",
            width: "350px"
          },
          {
            prop: "total_sales_amount",
            label: "销售金额",
          },
          {
            prop: "total_rang_li_amount",
            label: "让利金额",
          },
          {
            prop: "total_sales_num",
            label: "销售笔数",
          },
          {
            prop: "CommunityName",
            label: "所属社区",
            slot: "CmmunityName",
            width: "200px",
          },




        ],

        statusOptions: [{
            name: '正常',
            id: 1
          },
          {
            name: '沉默',
            id: 2
          },

        ],
        searchForm: {
          integralRange: [0, 0]

        },
      };
    },
    methods: {
      hangToString(val) {
        return toString(val)
      },
      // 获取表格数据
      async fetchTableData(params = {}) {

        const postData = Object.assign({}, params, this.searchForm);

        try {
          const result = await this.$httpRequest.get('/merchant/list', postData)
          console.log('table----data',result.list)
          return result
        } catch (e) {
          this.$message.error(e.message)
          throw e // 保持错误继续向上传递
        }

      },
      //重置
      reset() {


      },
      // 编辑
      handleEdit(row) {
        // 打开编辑对话框逻辑
        this.currentRow = {
          ...row
        }; // 可深拷贝
        this.dialogVisible = true;
      },

      // 删除
      async handleDelete(row) {
        console.log("删除:", row);
      },

      // 状态变更
      async handleStatusChange(row) {
        console.log("状态变更:", row);
        this.$message.success("状态更新成功");
      },

      handleApprove(payload) {
        console.log("-----状态变更----:", payload);
        this.$httpRequest.post('/user/status', payload).then(result => {
          console.log('--approved---result------', result)
          if (result.code == 0) {
            this.$message.success('完成状态修改')
            this.$refs.table.refresh()
          } else {
            this.$message.error('状态修改失败')
          }
        }).catch(e => {
          this.$message.error(e.message)
        });
      },



    },
  };
</script>

<style>
  .page-box {
    padding: 20px;

  }

  .panbox {
    display: flex;
    justify-content: space-between;
    align-content: center;
    background-color: #fff;
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    min-height: 200px;
  }

  .panbox-item {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 20px 50px;
    box-sizing: border-box;
    border-radius: 20px;

    position: relative;
    height: 50px;
  }


  .panbox-item-ex {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 20px 50px;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: #fff;
    position: absolute;
    top: 8px;
    left: 0;
    box-shadow: 2px 2px 2px 2px #efefef;
  }


  .pit1-bg {
    background-color: #5772ef;
  }

  .pit2-bg {
    background-color: #4d45cd;
  }

  .pit3-bg {
    background-color: #529bf0;
  }

  .pit4-bg {
    background-color: #55ccf1;
  }



  .pit-1 {
    font-size: 12px;
    color: #999;
  }

  .pit-2 {
    margin-top: 5px;
    font-size: 24px;
    font-weight: 600;
    color: #111;
  }

  .pit-3 {
    margin-top: 5px;
    font-size: 12px;
    color: #008B00;
  }

  .pi-img-box {
    width: 45px;
    height: 45px;
    border-radius: 10px;

    box-sizing: border-box;
    overflow: hidden;
  }


  .p-10 {
    padding: 10px;
  }

  .p-5 {
    padding: 5px;
  }

  .pi-img-box img {
    width: 100%;
    height: 100%;
  }

  .panbox-item-title-box {
    padding-left: 20px;
    box-sizing: border-box;
  }

  .full-fix {
    width: 20px;
    height: 40px;
  }

  .table-box {
    width: 100%;
    margin-top: 20px;
  }
</style>
